<template>
  <view class="container">
    <uni-card :title="item.id+''" thumbnail="" :extra="item.postDate" :note="item.foodId"
      v-for="(item,index) in commentlist">
      <text>{{item.comment}}</text>
    </uni-card>
    <uni-load-more :status="'more'" @clickLoadMore="loadmore"
      :contentText="{contentdown:  '显示更多',contentrefresh: '正在加载...',contentnomore: '没有更多数据了'}"></uni-load-more>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        pageIndex: 1,
        pageSize: 10,
        foodid: 1,
        commentlist: [],
      }
    },
    onReachBottom() {
      uni.showLoading()
      setTimeout(() => {
        this.loadmore()
      }, 1000);
    },
    methods: {
      reload() {
        uni.request({
          url: this.$baseUrl + 'comments/getCommentsByFoodIdByPage',
          method: 'POST',
          header: {
            'content-type': 'application/json' //重点
          },
          data: {
            foodid: this.foodid || 1,
            pageIndex: 1,
            pageSize: this.pageSize
          },
          success: res => {
            this.commentlist = res.data.data.content
            console.log(this.commentlist);

          },
          fail: (err) => {
            console.log(err);
          },
          complete: () => {
            uni.stopPullDownRefresh()
          }
        });
      },
      loadmore() {

        this.pageIndex = this.pageIndex + 1
        uni.request({
          url: this.$baseUrl+'comments/getCommentsByFoodIdByPage',
          method: 'POST',
          header: {
            'content-type': 'application/json' //重点
          },
          data: {
            foodid: this.foodid || 1,
            pageIndex: this.pageIndex,
            pageSize: this.pageSize
          },
          success: res => {
            console.log(res);
            this.commentlist = this.commentlist.concat(res.data.data.content)
            console.log(this.commentlist);

          },
          fail: (err) => {
            console.log(err);
          },
          complete: () => {
            uni.hideLoading()
          }
        });
      }
    },
    onPullDownRefresh() {
      this.reload()
    },
    onLoad(e) {
      console.log(e);
      this.foodid = e.foodid
      this.reload()
    }
  }
</script>

<style>
  .container {
    padding: 20px;
    font-size: 14px;
    line-height: 24px;
  }
</style>